<template>
  <div class="clas_All">
    <!-- 头部搜索相关 -->
    <el-form :model="AllotList" size="mini" :inline="true">
      <el-form-item prop="menuName">
        <el-input
          v-model="AllotList.FMaterialIdfnumber"
          placeholder="物料编码"
          clearable
          @keyup.enter.native="getallotList"
        />
      </el-form-item>
      <el-form-item prop="menuName">
        <el-input
          v-model="AllotList.FMaterialIdfname"
          placeholder="物料名称"
          clearable
          @keyup.enter.native="getallotList"
        />
      </el-form-item>

      <!-- <el-form-item prop="status">
        <el-date-picker
          v-model="AllotList.createTime"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" size="mini" @click="getallotList"
          >查询</el-button
        >
        <el-button
          v-hasPermi="['material:transfer:all']"
          size="mini"
          @click="resetQuery"
          >添加调拨</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据展示 -->
    <el-table
      v-loading="loading"
      :data="menuList"
      row-key="menuId"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- style="z-index: -9999" -->
      <!-- :default-expand-all="isExpandAll" -->
      <el-table-column prop="fbillno" label="调拨单据号" align="center">
      </el-table-column>
      <el-table-column
        prop="FMaterialIdfnumber"
        label="物料编码"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="FMaterialIdfname"
        label="物料名称"
      ></el-table-column>
      <el-table-column
        prop="FUnitIDfname"
        label="单位"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="FQty"
        label="调拨数量"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="FNegotiateAmount" label="调拨金额" width="80">
      </el-table-column>
      <el-table-column align="center" prop="FOUTDEPTIDfname" label="调出班组">
      </el-table-column>
      <el-table-column align="center" prop="FINDEPTIDfname" label="调入班组">
      </el-table-column>
      <el-table-column align="center" prop="createBy" label="操作人">
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <!-- class-name="small-padding fixed-width" -->
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['material:transfer:all']"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >编辑
          </el-button>
          <!-- size="mini" type="text" -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="AllotList.pageNum"
      :limit.sync="AllotList.pageSize"
      @pagination="getallotList"
    />
    <!-- 添加调拨 -->
    <el-dialog
      v-bind="$attrs"
      :visible.sync="dialogFormVisible"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      title="添加调拨"
    >
      <el-row :gutter="15">
        <el-form
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="24">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="调出" prop="FStockOutOrgfnumber">
                  <el-select
                    v-model="formData.FStockOutOrgfnumber"
                    placeholder="请选择调出门店"
                    :style="{ width: '50%' }"
                    @change="OpenQCmendian"
                  >
                    <el-option
                      v-for="(item, index) in field108Options"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="formData.FOUTDEPTIDfnumber"
                    placeholder="请选择调出工作组"
                    :style="{ width: '50%' }"
                    @change="Opendiaochu"
                  >
                    <el-option
                      v-for="(item, index) in field111Options"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="24">
                <el-form-item label="调入" prop="FStockInOrgIDfnumber">
                  <el-select
                    v-model="formData.FStockInOrgIDfnumber"
                    placeholder="请选择调入部门"
                    :style="{ width: '50%' }"
                    @change="OpenDRmendian"
                  >
                    <el-option
                      v-for="(item, index) in field108Options"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="formData.FINDEPTIDfnumber"
                    placeholder="请选择调入工作组"
                    :style="{ width: '50%' }"
                    @change="Opendiaoru"
                  >
                    <el-option
                      v-for="(item, index) in field110Options"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-button
                  style="margin-bottom: 10px"
                  @click="OnMaterialsList"
                  type="primary"
                  size="medium"
                  :disabled="Blndisabled"
                  >物料选择</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
      <el-table :data="tableData">
        <!-- <el-table-column align="center" label="序号"></el-table-column> -->
        <el-table-column
          align="center"
          prop="FMaterialIdfnumber"
          label="物料编码"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="FMaterialIdfname"
          label="物料名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="单价"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="FUnitIDfname"
          label="单位"
        ></el-table-column>
        <el-table-column align="center" label="调拨数量">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-input
              @change="dine(scope.row)"
              v-model="scope.row.FQty"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="FNegotiateAmount"
          label="调拨金额"
        ></el-table-column>
        <el-table-column align="center" prop="" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" type="text" @click="DelTable(scope.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
    <!-- 选择物料 -->
    <el-dialog
      @open="onMaterialsOpen"
      @close="onMaterialsClose"
      width="40%"
      title="选择物料"
      :visible.sync="materialsVisible"
    >
      <el-form :model="materialsQueryParams" size="medium" label-width="100px">
        <el-row>
          <el-col :span="5">
            <el-input
              v-model="materialsQueryParams.stapCode"
              placeholder="请输入原料编码"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="materialsQueryParams.stapName"
              placeholder="请输入原料名称"
            ></el-input>
          </el-col>
          <el-col :span="5">
            <el-button @click="getMaterialsList">查找</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        highlight-current-row
        @current-change="materialsChange"
        :data="materialsData"
        style="width: 100%"
      >
        <el-table-column prop="stapTypeName" label="类别"> </el-table-column>
        <el-table-column prop="stapCode" label="原料编码" width="180">
        </el-table-column>
        <el-table-column prop="stapName" label="原料名称" width="180">
        </el-table-column>
        <el-table-column prop="stapBaseUnit" label="单位"> </el-table-column>
      </el-table>
      <pagination
        :total="materialstotal"
        :page.sync="materialsQueryParams.pageNum"
        :limit.sync="materialsQueryParams.pageSize"
        @pagination="getMaterialsList"
      />
      <el-row justify="space-between" style="margin-top: 35px">
        <el-col :span="12" class="btn">
          <el-button type="primary" size="medium" round @click="MaterialsCan()">
            确定
          </el-button>
        </el-col>
        <el-col :span="12" class="btn">
          <el-button
            type="primary"
            size="medium"
            round
            @click="MaterialsDeny()"
          >
            取消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 编辑调拨 -->
    <el-dialog
      v-bind="$attrs"
      :visible.sync="EditdialogFormVisible"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      title="添加调拨"
    >
      <el-row :gutter="15">
        <el-form
          :model="EditformData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="24">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="调出" prop="FStockOutOrgfnumber">
                  <el-select
                    v-model="EditformData.FStockOutOrgIDfname"
                    placeholder="请选择调出门店"
                    disabled
                    :style="{ width: '50%' }"
                    @change="OpenQCmendian"
                  >
                    <el-option
                      v-for="(item, index) in field108Options"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="EditformData.FOUTDEPTIDfname"
                    placeholder="请选择调出工作组"
                    :style="{ width: '50%' }"
                    disabled
                    @change="Opendiaochu"
                  >
                    <el-option
                      v-for="(item, index) in field111Options"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="24">
                <el-form-item label="调入" prop="FStockInOrgIDfnumber">
                  <el-select
                    v-model="EditformData.FStockInOrgIDfname"
                    placeholder="请选择调入部门"
                    :style="{ width: '50%' }"
                    disabled
                    @change="OpenDRmendian"
                  >
                    <el-option
                      v-for="(item, index) in field108Options"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="EditformData.FINDEPTIDfname"
                    placeholder="请选择调入工作组"
                    :style="{ width: '50%' }"
                    disabled
                    @change="Opendiaoru"
                  >
                    <el-option
                      v-for="(item, index) in field110Options"
                      :key="index"
                      :label="item.deptName"
                      :value="item.deptCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-form>
      </el-row>
      <el-table :data="EditTableData">
        <!-- <el-table-column align="center" label="序号"></el-table-column> -->
        <el-table-column
          align="center"
          prop="FMaterialIdfnumber"
          label="物料编码"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="FMaterialIdfname"
          label="物料名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="单价"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="FUnitIDfname"
          label="单位"
        ></el-table-column>
        <el-table-column align="center" label="调拨数量">
          <template slot-scope="scope">
            <!-- {{ scope.row }} -->
            <el-input
              type="number"
              min="1"
              @change="dine(scope.row)"
              v-model="scope.row.FQty"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="FNegotiateAmount"
          label="调拨金额"
        ></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="close">取消</el-button>

        <el-button type="primary" @click="handleConfirmTow">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { bomDish_bom, selectedstapById } from "@/api/system/bom";
import {
  listStockAllot,
  FindShopBom,
  Findkingdee,
  addtransfer,
  materialtransfer,
  updatetransfer,
} from "@/api/system/stock";

export default {
  // inheritAttrs: false,
  data() {
    return {
      materialsVisible: false,
      EditdialogFormVisible: false,
      //物料数据列表
      materialsData: [],
      // 选中添加物料的foodCode
      materialsCode: null,
      meterId: null,
      tableData: [],
      // 保存获取的物料信息
      loadType: 0,
      materData: {},
      //保存选中的数据
      menuChangeList: [],
      //物料分页
      materialsQueryParams: {
        pageNum: 1,
        pageSize: 10,
        // 查询数据
        // 菜品名称
        dishName: null,
        //菜品ID
        dishCode: null,
      },
      // 存储选中物料的数据
      materialsList: [],
      total: 0,
      // 展示调拨列表
      AllotList: {},
      loading: true,
      //添加调拨
      tableTwoData: [],
      dialogFormVisible: false,
      formData: {
        // 调出部门编码
        FStockOutOrgfnumber: undefined,
        // 调出部门名称
        FStockOutOrgIDfname: undefined,
        // 调入部门编码
        FStockInOrgIDfnumber: undefined,
        // 调入部门名称
        FStockInOrgIDfname: undefined,
        // 调出工作组编码
        FOUTDEPTIDfnumber: undefined,
        // 调出工作组名称
        FOUTDEPTIDfname: undefined,
        // 调入工作组编码
        FINDEPTIDfnumber: undefined,
        // 调入工作组名称
        FINDEPTIDfname: undefined,
      },
      menuList: [],
      field111Options: [],

      rules: {},
      field107Options: [],
      field108Options: [],
      field109Options: [],
      field110Options: [],
      //店铺信息
      findshoplist: [],
      materialstotal: [],
      EditformData: {},
      EditTableData: [],
      Blndisabled: true,
    };
  },
  created() {
    this.getallotList();
    this.getDeptList();
  },
  watch: {
    "formData.FOUTDEPTIDfnumber": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.tableData = [];
        }
        if (newVal) {
          this.Blndisabled = false;
        } else {
          this.Blndisabled = true;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 查询
    handleQuery() {},
    // 获取部门数据
    getDeptList() {
      FindShopBom().then((res) => {
        this.field107Options = res.data;
        this.field108Options = res.data;
      });
    },
    // 调入部门
    OpenDRmendian(v) {
      let obj = this.field107Options.filter((item) => {
        if (this.formData.FStockInOrgIDfnumber == item.id) {
          return item.label;
        }
      });
      this.formData.FINDEPTIDfnumber = "";
      this.formData.FStockInOrgIDfname = obj[0].label;
      Findkingdee(v).then((res) => {
        if (res.code == 200) {
          this.field110Options = res.data;
        }
      });
    },
    // 调出门店
    OpenQCmendian(v) {
      let obj = this.field107Options.filter((item) => {
        if (this.formData.FStockOutOrgfnumber == item.id) {
          return item.label;
        }
      });
      this.formData.FOUTDEPTIDfnumber = "";
      this.formData.FStockOutOrgIDfname = obj[0].label;
      Findkingdee(v).then((res) => {
        if (res.code == 200) {
          this.field111Options = res.data;
        }
      });
    },
    //调出工作组
    Opendiaochu(v) {
      let obj = this.field111Options.filter((item) => {
        if (v == item.deptCode) {
          return item.deptName;
        }
      });
      this.tableData = [];
      this.formData.FOUTDEPTIDfname = obj[0].deptName;
    },
    //调入工作组
    Opendiaoru(v) {
      let obj = this.field110Options.filter((item) => {
        if (v == item.deptCode) {
          return item.deptName;
        }
      });
      this.formData.FINDEPTIDfname = obj[0].deptName;
    },
    //获取调拨列表
    getallotList() {
      //
      listStockAllot(this.AllotList).then((res) => {
        if (res.code == 200) {
          this.menuList = res.rows;
          this.total = res.total;
          this.loading = false;
        }
      });
    },
    // 添加调拨按钮触发时
    resetQuery() {
      this.dialogFormVisible = true;
    },
    // 添加调拨标签卡打开
    onOpen() {},
    // 添加调拨
    onClose() {
      this.formData = {};
      this.EditformData = {};
      this.EditTableData = [];
      this.tableData = [];
    },
    close() {},
    // 将物料添加调拨标签卡确定
    handleConfirm() {
      let arr = [];
      for (let a = 0; a < this.tableData.length; a++) {
        arr.push({
          ...this.tableData[a],
          ...this.formData,
        });
      }
      addtransfer(arr).then((res) => {});
    },
    // 编辑调拨标签卡确定
    handleConfirmTow() {
      console.log(this.EditTableData[0].FQty);
      if (this.EditTableData[0].FQty >= 1) {
        updatetransfer(this.EditTableData).then((res) => {
          if (res.code == 200) {
          }
        });
      } else {
        this.$message({
          message: "调拨数量不能为空",
          type: "warning",
          center: true,
        });
      }
    },
    handleUpdate(v) {
      this.EditdialogFormVisible = true;
      const jsonDate = new Date(v.createTime);
      let m = jsonDate.getMonth() + 1;
      let obj = {
        fbillno: v.fbillno,
        month: m,
        FMaterialId: v.FMaterialId,
      };
      materialtransfer(obj).then((res) => {
        res.data[0].price = res.data[0].FNegotiatePrice;
        this.EditformData = res.data[0];
        this.EditTableData.push(res.data[0]);
      });
    },
    dine(i) {
      if (i >= 1) {
        let co = i.price * Number(i.FQty);
        this.$set(i, "FNegotiateAmount", co.toFixed(2));
      }

      // this.FNegotiateAmount = co;
    },
    //选择物料按钮触发
    OnMaterialsList() {
      this.materialsVisible = true;
    },
    //选择物料确定
    MaterialsCan() {
      // console.log(this.materData.id, this.formData.FOUTDEPTIDfnumber);
      if (this.formData.FOUTDEPTIDfnumber != null) {
        selectedstapById({
          id: this.materData.id,
          deptCode: this.formData.FOUTDEPTIDfnumber,
        }).then((res) => {
          let duplicates = this.tableData.filter(
            (item) => item.stapCode === res.data.stapCode
          ).length;
          if (duplicates > 1) {
            this.$message({
              message: "物料不能重复",
              type: "warning",
              center: true,
            });
          } else {
            this.tableData.push({
              FMaterialIdfnumber: res.data.stapCode,
              FMaterialIdfname: res.data.stapName,
              FQty: res.data.quota,
              price: res.data.price,
              FUnitIDfname: res.data.stapBaseUnit,
              FMaterialId: res.data.id,
            });
            this.materialsVisible = false;
          }
        });
      } else {
        this.materialsVisible = false;
        this.$message({
          message: "请选择调出门店",
          type: "warning",
          center: true,
        });
      }
    },
    //选择物料取消
    MaterialsDeny() {
      this.materialsVisible = false;
      this.materialsData = [];
    },
    //删除物料
    DelTable(v) {
      //循环查找要删除的数据
      console.log(v, this.materData);
      this.tableData.filter((item, index) => {
        if (item.id == v.id) {
          this.tableData.splice(index, 1);
        }
      });
    },
    //物料打开
    onMaterialsOpen() {
      this.getMaterialsList();
    },
    //物料关闭
    onMaterialsClose() {
      this.materialsQueryParams.stapCode = "";
      this.materialsQueryParams.stapName = "";
      this.materData = undefined;
    },
    //获取物料信息
    getMaterialsList() {
      let TqlDish = this.materialsQueryParams;
      bomDish_bom(TqlDish).then((response) => {
        if (response.code == 200) {
          this.materialsData = response.rows;
          this.materialstotal = response.total;
          this.loading = false;
        } else {
          this.$message({
            message: response.msg,
            type: "warning",
            center: true,
          });
        }
      });
      this.loading = true;
    },
    materialsChange(v) {
      this.materData = v;
    },
    handleChange(v) {},
  },
};
</script>

<style lang="scss" scoped>
.btn {
  text-align: center;
}

.clas_All {
  margin: 20px;
}
</style>
